<template>
    <div class="smoke">
        <div class="boxTitle">
            <img src="@/assets/images/home/rulu.png" alt="">
            <span class="title">烟气监测</span>
        </div>
        <div class="head">
            <div class="head_item">
                <span class="head_left">氧气O₂</span>
                <span class="head_right">6.6%</span>
            </div>
            <div class="head_item head_item2">
                <span class="head_left">烟气流量</span>
                <span class="head_right">94939.3 nm³/h</span>
            </div>
        </div>
        <div class="table">
            <el-table :data="tableData.list" height="20.83vh" style="width :100%;" stripe :scrollbar-always-on="true">
                <el-table-column prop="name" label="烟气指数" class-name="column_date" align="center" />
                <el-table-column prop="inventory" label="折算值" class-name="column_common" align="center"/>
                <el-table-column prop="weight" label="小时均值" align="center"/>
                <el-table-column prop="weight2" label="十分钟均值" align="center"/>
                <el-table-column prop="water" label="国际" align="center"/>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">

let tableData = reactive({
    list: [
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
        { name: "SO2", inventory: "56.3", weight: 78.3, weight2: " ≤40", water: " ≤40" },
    ]
})

</script>

<style lang="scss" scoped>
.smoke {
    position: absolute;
    background: url(@/assets/images/home/left2.png) no-repeat;
    background-size: 100% 100%;
    top: vh(388);
    right: vh(21);
    width: vh(421);
    height: vh(302);
    z-index: 999;
    padding-left: vh(14);
    padding-right: vh(12);

    .head {
        display: flex;
        justify-content: space-between;
        margin-top: vh(12);

        .head_item {
            width: vh(154);
            height: vh(27);
            line-height: vh(27);
            background: rgba(11, 26, 50, 0.6);
            // border-radius: vh(10);
            display: flex;
            align-items: center;

            .head_left {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #00E3FE;
                margin-left: vh(11);
                margin-right: vh(14);
                line-height: vh(27);
            }

            .head_right {
                font-family: DIN;
                font-weight: bold;
                font-size: vh(17);
                color: #FFC000;
            }

            &.head_item2 {
                width: vh(200);

                .head_left {
                    margin-right: vh(10);
                }
            }
        }
    }
    .table {
        margin-top: vh(11);
        // height: vh(225);
    //    overflow-y: scroll;
    }
}
</style>
